<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>注册页面</title>
  <link rel="icon" href="LightYear/favicon.ico" th:href="@{/LightYear/favicon.ico}" type="image/ico">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。">
<meta name="author" content="yinqi">
<link href="LightYear/css/bootstrap.min.css" th:href="@{/LightYear/css/bootstrap.min.css}" rel="stylesheet">
<link href="LightYear/css/materialdesignicons.min.css" th:href="@{/LightYear/css/materialdesignicons.min.css}" rel="stylesheet">
<link href="LightYear/css/style.min.css" th:href="@{/LightYear/css/style.min.css}" rel="stylesheet">
<style>
.login-box {
    background-color: rgba(255, 255, 255, .25);
}
.login-box p:last-child {
    margin-bottom: 0px;
}
.login-form .form-control {
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
}
.login-form .has-feedback {
    position: relative;
}
.login-form .has-feedback .form-control {
    padding-left: 36px;
}
.login-form .has-feedback .mdi {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    width: 36px;
    height: 36px;
    line-height: 36px;
    z-index: 4;
    color: #dcdcdc;
    display: block;
    text-align: center;
    pointer-events: none;
}
.login-form .has-feedback.row .mdi {
    left: 15px;
}
.login-form .form-control::-webkit-input-placeholder{ 
    color: rgba(255, 255, 255, .8);
} 
.login-form .form-control:-moz-placeholder{ 
    color: rgba(255, 255, 255, .8);
} 
.login-form .form-control::-moz-placeholder{ 
    color: rgba(255, 255, 255, .8);
} 
.login-form .form-control:-ms-input-placeholder{ 
    color: rgba(255, 255, 255, .8);
}
.login-form .custom-control-label::before {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(0, 0, 0, 0.1);
}
</style>
</head>
  
<body class="center-vh" style="background-image: url(/LightYear/images/back-navy.png); background-size: cover;">
<div class="login-box p-5 w-420 mb-0 mr-2 ml-2">
  <div class="text-center mb-3">
    <a href="index"> <img alt="light year admin" src="LightYear/images/SuperAfflatus.png" th:src="@{/LightYear/images/systitle.png}"> </a>
  </div>
  <form  method="post" class="login-form" id="formId">
    <div class="form-group has-feedback">
      <span class="mdi mdi-account" aria-hidden="true"></span>
      <input type="text" class="form-control" name="username" id="username" placeholder="请输入账号">
    </div>


    <!--<div class="form-group has-feedback">
      <span class="mdi mdi-account-badge-outline" aria-hidden="true"></span>
      <input type="text" class="form-control" id="loginaction" placeholder="请输入昵称">
    </div>-->

    <div class="form-group has-feedback">
      <span class="mdi mdi-lock" aria-hidden="true"></span>
      <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
    </div>

    <div class="form-group has-feedback">
      <span class="mdi mdi-key" aria-hidden="true"></span>
      <input type="password" class="form-control" id="password1" placeholder="请确认密码">
    </div>

    <div class="form-group has-feedback">
      <span class="mdi mdi-email" aria-hidden="true"></span>
      <input type="email" class="form-control" name="email" id="email" placeholder="请输入邮箱">
    </div>

    <div class="form-group has-feedback">
      <span class="mdi mdi-cellphone-iphone" aria-hidden="true"></span>
      <input type="text" class="form-control"  name="mobile" id="mobile" placeholder="请输入手机号" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength=11>
    </div>



   <!-- <div class="form-row">
      <div class="form-row">
        <button class="btn btn-block form-control" type="reset" >重置</button>
        <button class="btn btn-block form-control" type="button" id="loginDemoBtn">立即注册</button>
      </div>
    </div>-->

    <div class="row" style="margin-top: 30px">
      <div class="col">
        <button class="btn btn-block form-control" type="button" id="loginDemoBtn">立即注册</button>
      </div>

      <div class="col">
        <button class="btn btn-block form-control" type="button" id="resetBtn" >数据重置</button>
      </div>

      <div class="col">
        <button class="btn btn-block form-control" type="button" id="toLoginBtn">返回登陆</button>
      </div>
    </div>
  </form>

  <!--<p class="text-center text-white">Copyright © 2020 <a href="http://lyear.itshubao.com">IT书包</a>. All right reserved</p>-->
</div>
<script type="text/javascript" src="LightYear/js/jquery.min.js" th:src="@{/LightYear/js/jquery.min.js}" ></script>
<script type="text/javascript" src="LightYear/layer/layer.js" th:src="@{/LightYear/layer/layer.js}" ></script>

<script type="text/javascript">
  $("#loginDemoBtn").click(function () {

    var username = $("input[name='username']").val();
    var password = $("input[name='password']").val();
    var password1 = $("#password1").val();
/*    console.log(username)
    console.log(password)
    console.log(password1)*/

    if(username==""){
        layer.tips("请输入用户名！","#username");
          return false;
      }
    if(password==""){
      layer.tips("请输入密码！","#password");
      return false;
    }


    if(password1!=password){
      layer.tips("两次密码输入不一致！","#password1");
      //$('#loginDemoBtn').addClass("layui-btn-disabled").attr("disabled",true);
      return false;
    }

//username=222&password=222&email=222&mobile=222  由于格式不是json 所以后端没有用到@RequestBody
    var  form  =  $("#formId").serialize()
    //console.log(form)

  $.ajax({
      url:"superLoginUser/register",
      type:"POST",
      data:form,
      success:function(data){
       // console.log(data)
        layer.msg('恭喜你，注册成功！', {
          // icon: 1,
          time: 3000 //2秒关闭（如果不配置，默认是3秒）
        }, function(){
          window.location.href="loginPage"  //去登录页面
        });


      }
    });

  })

 $("#toLoginBtn").click(function () {
   /* layer.confirm("确定要返回登陆页面？",{icon: 3,title:'提示信息'},function(index){
      var dengdai =layer.load(2,{time:10*1000});
      window.location.href="mylogin";
    });*/
   window.location.href="loginPage";
  })



  $("#resetBtn").click(function () {
    //记住 要用document.getElementById("myform").reset(); 不要用$("#myform").reset();
    //$('#formId').reset()
    document.getElementById("formId").reset();
    $('#loginDemoBtn').removeClass("layui-btn-disabled").attr("disabled",false);

  })




 $("input[name='username']").change(function(){
      var username = this.value;
     // console.log(username);
       if(username!=""){
         //返回了整个页面？
         $.ajax({
           url : "superLoginUser/checkLoginacct",
           type: "POST",
           data:{ "username":username},
           // dataType : 'json',    //不注释无法返回数据
           success : function(logunuser) {
            // console.log(logunuser);
             if(logunuser.username==username){
               layer.tips("用户已存在,不可注册!","#username");
               $('#loginDemoBtn').addClass("layui-btn-disabled").attr("disabled",true);
             }else if(logunuser==""){
               layer.tips("恭喜，用户名可用!","#username");
               $('#loginDemoBtn').removeClass("layui-btn-disabled").attr("disabled",false);


             }
           }
         });
       }

  });



</script>


</body>
</html>